﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>coway</title>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/common.css?v=0.1">

    <link rel="stylesheet" href="./css/mobileSelect.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/mobileSelect.js"></script>
    <script src="./js/selectDate.js?v=1.5"></script>
    <style>
        .products {
            text-align: center;
            overflow: hidden;
        }

        .cardSpan {
            display: inline-block;
            width: 220px;
            color: #606266;
        }

        .box-card {
            margin: 10px;
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="app" v-loading.fullscreen.lock="loading">
        <div class="header">
            <img src="./img/logo.png" width="120px" alt="" class="log">
        </div>
        <div class="body">

            <p
                style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px; font-weight: bold; margin: 20px;">
                已购买产品</p>
            <div class="products">
                <el-card class="box-card" style="width: 30%; float: left;" v-for="item in orderItems">
                    <div slot="header" class="clearfix">
                        <span>{{item.model}}</span>
                    </div>
                    <p><span class="cardSpan">quantity:</span>{{item.quantity}}</p>
                    <p><span class="cardSpan">contractDuration:</span>{{item.contractDuration}}</p>
                    <p><span class="cardSpan">registrationFee:</span>{{item.registrationFee}}</p>
                    <p><span class="cardSpan">monthlyRent:</span>{{item.monthlyRent}}</p>
                    <p><span class="cardSpan">salesPrice:</span>{{item.salesPrice}}</p>
                    <p><span class="cardSpan">monthlyPaymentMethod:</span>{{orderItems[0].monthlyPaymentMethod}}</p>
                </el-card>
            </div>

            <br>

            <p
                style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px; font-weight: bold; margin: 20px;">
                INSTALLATION DETAILS</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="350px" class="demo-ruleForm"
                label-suffix=":" label-position="right">
                <!-- <el-form-item label="Order No\订单号">
                    <el-input v-model="ruleForm.orderNo" disabled></el-input>
                </el-form-item>
                <el-form-item label="Referral No" prop="referralNo">
                    <el-input v-model="ruleForm.referralNo" disabled></el-input>
                </el-form-item> -->
                <el-form-item label="Purchase Or Rental\购买方式" prop="buyWay">
                    <el-select v-model="ruleForm.buyWay" placeholder="请选择" disabled>

                        <el-option label="PURCHASE\买断" value="payment">
                        </el-option>
                        <el-option label="PURCHASE\买断分期" value="paymentInstallment">
                        </el-option>
                        <el-option label="RENTAL\租赁" value="rental">
                        </el-option>
                        <el-option label="PURCHASE&RENTAL\买断和租赁" value="paymentAndRental"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="MEMBERSHIP\会员" prop="membership">
                    <el-radio-group size="small" v-model="ruleForm.membership">
                        <el-radio-button label="PLUS">PLUS</el-radio-button>
                        <el-radio-button label="YES">YES</el-radio-button>
                        <el-radio-button label="NO">NO</el-radio-button>
                    </el-radio-group>
                </el-form-item>


                <!-- <el-form-item label="RENTAL/PURCHASE TYPE/租赁" prop="item">
                    <el-select v-model="ruleForm.item" placeholder="请选择">
                        <el-option label="NORMAL" value="NORMAL">
                        </el-option>
                        <el-option label="CREDIT INQUIRY" value="CREDIT INQUIRY">
                        </el-option>
                        <el-option label="NEW ORDER DISCOUNT" value="NEW ORDER DISCOUNT">
                        </el-option>
                        <el-option label="REORDER" value="REORDER">
                        </el-option>

                    </el-select>
                </el-form-item> -->

                <el-form-item v-if="ruleForm.item == 'NEW ORDER DISCOUNT'" label="NEW ORDER NO">
                    <el-input v-model="ruleForm.Referral"></el-input>
                </el-form-item>

                <el-form-item v-if="ruleForm.item == 'REORDER'" label="OLD ORDER NO" prop="Referral">
                    <el-input v-model="ruleForm.Referral"></el-input>
                </el-form-item>


                <el-form-item label="FIRST NAME (AS IN ID)\名字" prop="firstName">
                    <el-input v-model="ruleForm.firstName" placeholder="FIRST NAME (AS IN ID)"></el-input>
                </el-form-item>
                <el-form-item label="LAST NAME (AS IN ID)\姓氏" prop="lastName">
                    <el-input v-model="ruleForm.lastName" placeholder="LAST NAME (AS IN ID)"></el-input>
                </el-form-item>
                <el-form-item label="SOCIAL SECURITY NUMBER\社安号" prop="socialSecurityNumber"
                    v-if="ruleForm.buyWay != 'payment'">
                    <el-input type="number" v-model="ruleForm.socialSecurityNumber.n1" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass"
                        style="width: 30%; -webkit-text-security:disc"
                        @input="()=>{ruleForm.socialSecurityNumber.n1.length>=3?$refs['SA2'].focus():''}">
                    </el-input> -
                    <el-input type="number" v-model="ruleForm.socialSecurityNumber.n2" maxlength="2"
                        oninput="if(value.length>2)value=value.slice(0,2)" class="numInputClass"
                        style="width: 30%;-webkit-text-security:disc" ref="SA2"
                        @input="()=>{ruleForm.socialSecurityNumber.n2.length==2?$refs['SA3'].focus():''}">
                    </el-input> - <el-input type="number" v-model="ruleForm.socialSecurityNumber.n3" maxlength="4"
                        oninput="if(value.length>4)value=value.slice(0,4)" class="numInputClass"
                        style="width: 30%;-webkit-text-security:disc" ref="SA3"
                        @input="()=>{ruleForm.socialSecurityNumber.n3.length>=4?$refs['SA3'].blur():''}"></el-input>
                </el-form-item>


                <el-form-item label="DATE OF BIRTH\出生日期" prop="dateOfBirth" id="hideError">

                    <el-input v-if="isMobild" id="select_0" placeholder="DATE OF BIRTH" v-model="ruleForm.dateOfBirth">
                    </el-input>

                    <el-date-picker v-if="!isMobild" v-model="ruleForm.dateOfBirth" value-format="yyyy-MM-dd" type="date"
                        :picker-options="pickerOptions" placeholder="DATE OF BIRTH">
                    </el-date-picker>


                </el-form-item>

                <el-form-item label="E-MAIL ADDRESS\邮箱地址" prop="eMail">
                    <el-input v-model="ruleForm.eMail" placeholder="eMail"></el-input>
                </el-form-item>

                <el-form-item label="TAX ID \ BUSINESS REGISTRATION NUMBER" prop="taxId">
                    <el-input v-model="ruleForm.taxId" placeholder="TAX ID \ BUSINESS REGISTRATION NUMBER"></el-input>
                </el-form-item>

                <!-- <el-form-item label="MEMBERSHIP/会员" prop="membership">
                    <el-radio v-model="ruleForm.membership" label="YES">YES</el-radio>
                    <el-radio v-model="ruleForm.membership" label="NO">NO</el-radio>
                </el-form-item> -->

                <el-form-item label="LEGAL ADDRESS \RESIDENCE\居住地址" prop="legalAddress">
                    <el-input placeholder="STREET" v-model="ruleForm.legalAddressStreet" size="small"
                        style="width:60%; margin-right:1%">
                        <template slot="prepend">STREET:</template>
                    </el-input>
                    <el-input placeholder="APT" v-model="ruleForm.legalAddressApt" size="small" style="width:38%;">
                        <template slot="prepend"> APT #:</template>
                    </el-input>
                    <el-input placeholder="CITY" v-model="ruleForm.legalAddressCity" size="small"
                        style="width:37%; margin-right:1%">
                        <template slot="prepend">CITY:</template>
                    </el-input>
                    <el-input placeholder="STATE" v-model="ruleForm.legalAddressState" size="small"
                        style="width:30%; margin-right:1%">
                        <template slot="prepend">STATE:</template>
                    </el-input>
                    <el-input placeholder="ZIP CODE" v-model="ruleForm.legalAddressZipCode" size="small"
                        style="width:30%;">
                        <template slot="prepend">ZIP CODE:</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="BILLING ADDRESS\账单地址" prop="billingAddress">
                    <p>
                        <el-checkbox v-model="ruleForm.BillingSameAboveLegalAddress">SAME AS LEGAL ADDRESS\与居住地址相同
                        </el-checkbox>
                    </p>
                    <div v-if="!ruleForm.BillingSameAboveLegalAddress">
                        <el-input placeholder="STREET" v-model="ruleForm.billingAddressStreet" size="small"
                            style="width:60%; margin-right:1%">
                            <template slot="prepend">STREET:</template>
                        </el-input>
                        <el-input placeholder="APT" v-model="ruleForm.billingAddressApt" size="small"
                            style="width:38%;">
                            <template slot="prepend"> APT #:</template>
                        </el-input>
                        <el-input placeholder="CITY" v-model="ruleForm.billingAddressCity" size="small"
                            style="width:37%; margin-right:1%">
                            <template slot="prepend">CITY:</template>
                        </el-input>
                        <el-input placeholder="STATE" v-model="ruleForm.billingAddressState" size="small"
                            style="width:30%; margin-right:1%">
                            <template slot="prepend">STATE:</template>
                        </el-input>
                        <el-input placeholder="ZIP CODE" v-model="ruleForm.billingAddressZipCode" size="small"
                            style="width:30%;">
                            <template slot="prepend">ZIP CODE:</template>
                        </el-input>
                    </div>

                </el-form-item>

                <el-form-item label="HOME PHONE NO.\家庭电话" prop="homePhone">

                    （<el-input v-model="ruleForm.homePhone.n1" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%"
                        @input="()=>{ruleForm.homePhone.n1.length>=3?$refs['homePhone1'].focus():''}">
                    </el-input>）
                    <el-input v-model="ruleForm.homePhone.n2" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%;"
                        @input="()=>{ruleForm.homePhone.n2.length>=3?$refs['homePhone2'].focus():''}" ref="homePhone1">
                    </el-input> -
                    <el-input v-model="ruleForm.homePhone.n3" type="number" maxlength="4"
                        oninput="if(value.length>4)value=value.slice(0,4)" class="numInputClass cur" size="small"
                        style="width: 30%;" ref="homePhone2"
                        @input="()=>{ruleForm.homePhone.n3.length>=4?$refs['homePhone2'].blur():''}">
                    </el-input>
                </el-form-item>

                <el-form-item label="MOBILE PHONE NO.\手机号码" prop="mobile">
                    （<el-input v-model="ruleForm.mobile.n1" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%" @input="()=>{ruleForm.mobile.n1.length>=3?$refs['mobile1'].focus():''}">
                    </el-input>）
                    <el-input v-model="ruleForm.mobile.n2" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%;" @input="()=>{ruleForm.mobile.n2.length>=3?$refs['mobile2'].focus():''}"
                        ref="mobile1">
                    </el-input> -
                    <el-input v-model="ruleForm.mobile.n3" size="small" type="number" maxlength="4"
                        oninput="if(value.length>4)value=value.slice(0,4)" class="numInputClass cur" style="width: 30%;"
                        ref="mobile2" @input="()=>{ruleForm.mobile.n3.length>=4?$refs['mobile2'].blur():''}">
                    </el-input>
                </el-form-item>


                <div style="clear: both;"></div>
                <p
                    style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px; font-weight: bold; margin: 20px;">
                    INSTALLATION DETAILS</p>
                <br>

                <el-form-item label="NAME IS SAME AS ABOVE\名字和姓氏是否和以上一致">
                    <el-radio-group size="small" v-model="ruleForm.InstallationSameAboveName">
                        <el-radio-button :label="true">YES</el-radio-button>
                        <el-radio-button :label="false">NO</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="FIRST NAME (AS IN ID)\名字" prop="installationFirstName"
                    v-if="!ruleForm.InstallationSameAboveName">
                    <el-input v-model="ruleForm.installationFirstName" placeholder="FIRST NAME (AS IN ID)"></el-input>
                </el-form-item>
                <el-form-item label="LAST NAME (AS IN ID)\姓氏" prop="installationLastName"
                    v-if="!ruleForm.InstallationSameAboveName">
                    <el-input v-model="ruleForm.installationLastName" placeholder="LAST NAME (AS IN ID)"></el-input>
                </el-form-item>

                <el-form-item label="REQUEST DATE\安装申请日期" prop="requestDate">
                    <el-input id="select_1"  v-if="isMobild" placeholder="REQUEST DATE" v-model="ruleForm.requestDate"></el-input>

                    <el-date-picker v-if="!isMobild" v-model="ruleForm.requestDate" value-format="yyyy-MM-dd" type="date"
                        :picker-options="pickerOptions2" placeholder="DATE OF BIRTH">
                    </el-date-picker>


                    <!-- <el-date-picker v-model="ruleForm.requestDate" type="date" placeholder="选择日期">
                    </el-date-picker> -->






                    <span style="color: #999;font-size:12px; line-height: 150%; display: inline-block;"> <i
                            class="el-icon-warning" style="color: #e6a23c;"></i> 注:Installation date will be confirmed
                        by Call center\确认购买后，客服会再次联系您确认安装时间</span>
                </el-form-item>



                <!-- <el-form-item label="是否和安装地址一致" prop="sameabove">
                    <el-radio-group size="small" v-model="ruleForm.sameabove">
                        <el-radio-button label="YES"></el-radio-button>
                        <el-radio-button label="NO"></el-radio-button>
                    </el-radio-group>
                </el-form-item> -->

                <el-form-item label="INSTALLATION ADDRESS\安装地址" prop="">
                    <p>
                        <el-checkbox v-model="ruleForm.InstallationSameAboveLegalAddress">SAME AS LEGAL ADDRESS\与居住地址相同
                        </el-checkbox>
                    </p>
                    <div v-if="!ruleForm.InstallationSameAboveLegalAddress">
                        <el-input placeholder="STREET" v-model="ruleForm.addressStreet" size="small"
                            style="width:60%; margin-right:1%">
                            <template slot="prepend">STREET:</template>
                        </el-input>
                        <el-input placeholder="APT" v-model="ruleForm.addressApt" size="small" style="width:38%;">
                            <template slot="prepend"> APT #:</template>
                        </el-input>
                        <el-input placeholder="CITY" v-model="ruleForm.addressCity" size="small"
                            style="width:37%; margin-right:1%">
                            <template slot="prepend">CITY:</template>
                        </el-input>
                        <el-input placeholder="STATE" v-model="ruleForm.addressState" size="small"
                            style="width:30%; margin-right:1%">
                            <template slot="prepend">STATE:</template>
                        </el-input>
                        <el-input placeholder="ZIP CODE" v-model="ruleForm.addressZipCode" size="small"
                            style="width:30%;">
                            <template slot="prepend">ZIP CODE:</template>
                        </el-input>
                    </div>

                </el-form-item>

                <el-form-item label="HOME PHONE NO.\家庭电话" prop="installationHomePhone">
                    <!-- <el-input v-model="ruleForm.homePhone" placeholder="HOME PHONE NO."></el-input> -->
                    （<el-input v-model="ruleForm.installationHomePhone.n1" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%"
                        @input="()=>{ruleForm.installationHomePhone.n1.length>=3?$refs['installationHomePhone1'].focus():''}">
                    </el-input>）
                    <el-input v-model="ruleForm.installationHomePhone.n2" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%;"
                        @input="()=>{ruleForm.installationHomePhone.n2.length>=3?$refs['installationHomePhone2'].focus():''}"
                        ref="installationHomePhone1">
                    </el-input> -
                    <el-input v-model="ruleForm.installationHomePhone.n3" type="number" maxlength="4"
                        oninput="if(value.length>4)value=value.slice(0,4)" class="numInputClass cur" size="small"
                        style="width: 30%;" ref="installationHomePhone2"
                        @input="()=>{ruleForm.installationHomePhone.n3.length>=4?$refs['installationHomePhone2'].blur():''}">
                    </el-input>
                </el-form-item>

                <el-form-item label="MOBILE PHONE NO.\手机号码" prop="installationMobile"
                    v-if="!ruleForm.InstallationSameAboveLegalAddress">
                    （<el-input v-model="ruleForm.installationMobile.n1" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%"
                        @input="()=>{ruleForm.installationMobile.n1.length>=3?$refs['mobile3'].focus():''}">
                    </el-input>）
                    <el-input v-model="ruleForm.installationMobile.n2" type="number" maxlength="3"
                        oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%;" ref="mobile3"
                        @input="()=>{ruleForm.installationMobile.n2.length>=3?$refs['mobile4'].focus():''}">
                    </el-input> -
                    <el-input v-model="ruleForm.installationMobile.n3" type="number" maxlength="4"
                        oninput="if(value.length>4)value=value.slice(0,4)" class="numInputClass cur" size="small"
                        style="width: 30%;" ref="mobile4"
                        @input="()=>{ruleForm.installationMobile.n3.length>=4?$refs['mobile4'].blur():''}">
                    </el-input>
                </el-form-item>


                <el-form-item label="REFRIGERATOR CONNECTION\是否需要链接冰箱" prop="option">
                    <el-radio-group size="small" v-model="ruleForm.option">
                        <el-radio-button label="YES"></el-radio-button>
                        <el-radio-button label="NO"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadBtn">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="./js/elementui.js"></script>
<script src="./js/common.js"></script>
<script>
    const isMobild =  ("ontouchstart" in window)
    new Vue({
        el: '#app',
        data() {
            const checkTax = (rule, value, callback) => {
                if (!/^[0-9a-zA-Z]{0,14}$/.test(value)) {
                    return callback(new Error('长度<=14,可以输入数字和字母'));
                }
                callback()
            }
            const validateMobile = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.mobile.n1 || !this.ruleForm.mobile.n2 || !this.ruleForm.mobile.n3) {
                    return callback(new Error('请输入完整手机号码'));
                }
                callback()
            }

            const validatelegalAddress = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.legalAddressStreet || !this.ruleForm.legalAddressCity || !this.ruleForm.legalAddressState || !this.ruleForm.legalAddressZipCode) {
                    return callback(new Error('请输入完整居住地址'));
                }
                callback()
            }

            const validatessn = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.socialSecurityNumber.n1 || !this.ruleForm.socialSecurityNumber.n2 || !this.ruleForm.socialSecurityNumber.n3) {
                    return callback(new Error('请输入完整社安号'));
                }
                callback()
            }

            const validateMobile2 = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.installationMobile.n1 || !this.ruleForm.installationMobile.n2 || !this
                    .ruleForm.installationMobile.n3) {
                    return callback(new Error('请输入完整手机号码'));
                }
                callback()
            }
            const validateDate = (rule, value, callback) => {
                console.log()
                if ($('#select_0').val() == '' && isMobild) {
                    return callback(new Error('请输入出生日期'));
                }
                if(value == '' && !isMobild){
                    return callback(new Error('请输入出生日期'));
                }
                callback()
            }
            const validateDate1 = (rule, value, callback) => {
                console.log()
                if ($('#select_1').val() == '' && isMobild) {
                    return callback(new Error('请选择安装申请日期'));
                }
                if(value == '' && !isMobild){
                    return callback(new Error('请选择安装申请日期'));
                }
                callback()
            }
            const validateEmail = (rule, value, callback) => {
                if (!/\w+@[a-z0-9]+\.[a-z]{2,4}/.test(value)) {
                    return callback(new Error('请输入正确的邮箱格式'));
                }
                callback()
            }
            return {
                orderItems: [],
                loadBtn: false,
                loading: true,
                isMobild: "ontouchstart" in window,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                },
                ruleForm: {
                    id: getQueryVariable('id'),
                    "firstName": "",
                    "lastName": "",
                    orderNo: '',
                    buyWay: 'payment',
                    referralNo: '',
                    item: 'NORMAL',
                    delivery: false,
                    socialSecurityNumber: {
                        n1: '',
                        n2: '',
                        n3: '',
                    },
                    sellerCode: '',
                    sellerName: '',
                    sellerPhone: '',
                    dateOfBirth: '',
                    eMail: '',
                    taxId: '',
                    homePhone: {
                        n1: '',
                        n2: '',
                        n3: ''
                    },
                    mobile: {
                        n1: '',
                        n2: '',
                        n3: ''
                    },
                    legalAddressStreet: '',
                    legalAddressCity: '',
                    legalAddressState: '',
                    legalAddressApt: '',
                    legalAddressZipCode: '',
                    billingAddressStreet: '',
                    billingAddressCity: '',
                    billingAddressState: '',
                    billingAddressApt: '',
                    billingAddressZipCode: '',
                    installationFirstName: '',
                    installationLastName: '',
                    InstallationSameAboveName: true,
                    BillingSameAboveLegalAddress: true,
                    requestDate: '',
                    addressStreet: '',
                    addressCity: '',
                    addressState: '',
                    addressZipCode: '',
                    addressStreet: '',
                    addressStreet: '',
                    addressStreet: '',
                    addressStreet: '',
                    installationHomePhone: {
                        n1: '',
                        n2: '',
                        n3: ''
                    },
                    installationMobile: {
                        n1: '',
                        n2: '',
                        n3: ''
                    },
                    InstallationSameAboveLegalAddress: true,
                    option: 'NO',
                    membership: 'NO',
                    remarks: ''
                },
                rules: {
                    buyWay: [{
                        required: true,
                        message: '请选择购买方式',
                        trigger: 'blur'
                    }, ],
                    item: [{
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }],
                    membership: [{
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }],
                    socialSecurityNumber: [{
                        required: true,
                        validator: validatessn,
                        trigger: 'blur'
                    }],
                    legalAddress: [{
                        required: true,
                        validator: validatelegalAddress,
                        trigger: 'blur'
                    }],
                    dateOfBirth: [{
                        required: true,
                        validator: validateDate,
                        trigger: 'blur'
                    }],
                    eMail: [{
                        required: true,
                        validator: validateEmail,
                        trigger: 'blur'
                    }],
                    mobile: [{
                        required: true,
                        validator: validateMobile,
                        trigger: 'blur'
                    }],
                    installationMobile: [{
                        required: true,
                        validator: validateMobile2,
                        trigger: 'blur'
                    }],
                    membership: [{
                        required: true,
                        message: '请输选择',
                        trigger: 'blur'
                    }],
                    firstName: [{
                        required: true,
                        message: '请输入名字',
                        trigger: 'blur'
                    }],
                    installationLastName: [{
                        required: true,
                        message: '请输入姓氏',
                        trigger: 'blur'
                    }],
                    installationFirstName: [{
                        required: true,
                        message: '请输入名字',
                        trigger: 'blur'
                    }],
                    lastName: [{
                        required: true,
                        message: '请输入姓氏',
                        trigger: 'blur'
                    }],
                    taxId: [{
                        validator: checkTax,
                        trigger: 'blur'
                    }],
                    requestDate: [{
                        required: true,
                        validator: validateDate,
                        trigger: 'change'
                    }]
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.loadBtn) return
                        this.loadBtn = true
                        this.$confirm('All prices are not including tax<br>所有价格均不包括税项', '温馨提示', {
                            confirmButtonText: '确定',
                            dangerouslyUseHTMLString: true,
                            showCancelButton: false,
                            type: 'warning'
                        }).then(() => {
                            axios({
                                method: 'post',
                                data: {
                                    ...this.ruleForm,
                                    socialSecurityNumber: `${this.ruleForm.socialSecurityNumber.n1}${this.ruleForm.socialSecurityNumber.n2}${this.ruleForm.socialSecurityNumber.n3}`,
                                    mobile: `${this.ruleForm.mobile.n1}${this.ruleForm.mobile.n2}${this.ruleForm.mobile.n3}`,
                                    homePhone: `${this.ruleForm.homePhone.n1}${this.ruleForm.homePhone.n2}${this.ruleForm.homePhone.n3}`,
                                    installationMobile: `${this.ruleForm.installationMobile.n1}${this.ruleForm.installationMobile.n2}${this.ruleForm.installationMobile.n3}`,
                                    installationHomePhone: `${this.ruleForm.installationHomePhone.n1}${this.ruleForm.installationHomePhone.n2}${this.ruleForm.installationHomePhone.n3}`,
                                    dateOfBirth: isMobild?$('#select_0').val():this.ruleForm.dateOfBirth,
                                    requestDate: isMobild?$('#select_1').val():this.ruleForm.requestDate,
                                },
                                url: window.baseUrl + '/api/app/order/byCustomer'
                            }).then(res => {
                                this.loadBtn = false
                                if (res.status != 200) {
                                    this.$message.error('服务不可用，请联系管理员')
                                    return
                                }
                                this.$message.success('提交成功')
                                setTimeout(() => {
                                    // location.href =
                                    //     'http://106.15.9.236:40580/api/app/pdf/exportOrder/' +
                                    //     res.data.id
                                    if (this.ruleForm.buyWay == 'payment') {
                                        location.href =
                                            '/payment.html?id=' +
                                            res.data.id
                                    } else {
                                        location.href =
                                            '/purchase.html?id=' +
                                            res.data.id
                                    }

                                }, 1500)
                            }, err => {
                                this.loading = false
                                console.log(err, 'err')
                                this.$message.error('服务器异常，请稍后重试！')
                            })
                        }).catch(() => {
                            this.loadBtn = false
                            this.$message({
                                type: 'info',
                                message: '已取消提交'
                            });
                        });





                    } else {
                        setTimeout(() => {
                            const isError = document.getElementsByClassName('is-error')
                            isError[0].querySelector('input').focus()
                        }, 100)
                        return false
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted() {

            this.loading = true
            axios({
                method: 'get',
                url: window.baseUrl + '/api/app/order/' + getQueryVariable('id'),
            }).then(res => {
                this.loading = false
                if (res.status != 200) {
                    this.$message.error('服务不可用，请联系管理员')
                    return
                }
                this.ruleForm.buyWay = res.data.buyWay
                this.ruleForm.orderNo = res.data.orderNo
                this.ruleForm.referralNo = res.data.referralNo
                this.ruleForm.sellerCode = res.data.sellerCode
                this.ruleForm.sellerName = res.data.sellerName
                this.ruleForm.sellerPhone = res.data.sellerPhone
                this.loading = false
                this.orderItems = res.data.orderItems
            }, err => {
                this.loading = false
                console.log(err, 'err')
                this.$message.error('服务器异常，请稍后重试！')
            })

            $('#select_0').on('click', function () {
                document.activeElement.blur();
            })
            $('#select_1').on('click', function () {
                document.activeElement.blur();
            })

            // 时间
            $.selectYY_MM_DD("#select_0", -100, 0);
            $.selectYY_MM_DD("#select_1", 0, 10);

            $('#hideError').on('click', function () {
                $('#hideError').removeClass('is-error')
                $('#hideError .el-form-item__error').remove()
            })

        }
    })
</script>

</html>